<template>
    <div class="tinymce">
        <div ref="tinymce"></div>
    </div>
</template>



<script>
import load from "./dynamicLoadScript";
// const tinymceCDN = "https://lib.baomitu.com/tinymce/5.8.2/tinymce.min.js";

import emitter from "element-ui/src/mixins/emitter";

export default {
    mixins: [emitter],
    model: {
        prop: "value",
        event: "input",
    },
    props: {
        value: {
            default: "",
            type: String,
        },
    },
    // theEditor = tinymce.activeEditor;
    // wordCount = theEditor.plugins.wordcount.getCount();
    data () {
        return {
            // styleselect   blockquote subscript superscript removeformat     cut copy paste pastetext | media    print打印 preview预览
            // axupimgs  多图上传   bdmap地图         formatpainter格式刷   restoredraft
            plugins:
                "print preview searchreplace autolink directionality\
             visualblocks visualchars fullscreen image link media template\
              code codesample table charmap hr pagebreak nonbreaking anchor \
              insertdatetime advlist lists wordcount imagetools textpattern \
              help emoticons autosave  autoresize indent2em kityformula-editor bdmap powerpaste",
            toolbar: [
                `
                undo redo | 
                formatselect fontselect fontsizeselect |
                forecolor backcolor bold italic underline strikethrough| 
                bullist numlist |`,
                `
                alignleft aligncenter alignright alignjustify outdent indent indent2em lineheight | 
                code  image  charmap emoticons hr pagebreak    |
                link anchor fullscreen kityformula-editor bdmap 
                `,
            ],
        };
    },
    // watch: {
    //     value (val) {
    //         if (!this.hasChange && this.hasInit) {
    //             this.$nextTick(() =>
    //                 window.tinymce.get(this.tinymceId).setContent(val || "")
    //             );
    //         }
    //     },
    // },
    mounted () {
        this.init();
        this.$once("hook:beforeDestroy", () => {
            const tinymce = window.tinymce.get("mytextarea");
            if (tinymce) {
                tinymce.destroy();
            }
        });
    },
    methods: {
        init () {
            // load(tinymceCDN, (err) => {
            //     if (err) {
            //         this.$message.error(err.message);
            //         return;
            //     }
            this.initTinymce();

            // });
        },
        // tinymce 官方插件
        // code    编辑html代码
        // lists   列表插件         advlist必须在lists插件启用的情况下才能使用
        // advlist 高级列表         该插件在工具栏的值并不是“advlist”，而是分成两个“bullist”和“numlist”，分别是无序列表UL，和有序列表OL。
        // image   上传图片         加入配置参数images_upload_url或 images_upload_handler才显示上传按钮
        // link    文件上传         加入配置参数file_picker_callback才显示上传按钮

        initTinymce () {
            tinymce.init({
                // selector: '#mytextarea',
                target: this.$refs.tinymce,
                language: "zh_CN", //设置语言
                language_url:
                    "https://lskjtest.oss-cn-shanghai.aliyuncs.com/hd-study/upload/qs/2g/8k/2021826_3436.js", ////设置地址
                // inline: true, //指定参数inline: true将开启内联模式：
                // hidden_input: false, //默认tinymce在开启内联模式（inline）会生成一个‘隐藏的input’用于执行保存动作时存放编辑器的内容。此选项默认开启，如果不需要生成这个input，可以设为false禁用此功能。
                plugins: this.plugins,
                toolbar: this.toolbar,
                font_formats:
                    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
                fontsize_formats:
                    "12px 13px 14px 16px 18px 24px 36px 48px 56px 72px",
                icons: "ax-color", //设置icon图标
                // block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',//用于配置“菜单：格式→区块”中的选项（非菜单：格式→格式→区块）。它的值形如：title=block，多个用分号分隔。
                // skin: 'oxide-dark',//设置皮肤  默认oxide是浅色版。 oxide-dark浅色版
                //  skin_url: '/css/mytinymceskin',//如果皮肤未存在上述文件夹内，可使用该选项，用URL指定一个皮肤的位置。
                // menubar: false,//不显示菜单
                // menubar: 'my1', //配置菜单
                // menu: {
                //     my1: { title: '工具', items: 'copy paste' }
                // },
                //  menu: {
                //     file: { title: '文件', items: 'newdocument' },
                //     edit: { title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall' },
                //     insert: { title: '插入', items: 'link media | template hr' },
                //     view: { title: '查看', items: 'visualaid' },
                //     format: { title: '格式', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
                //     table: { title: '表格', items: 'inserttable tableprops deletetable | cell row column' },
                //     tools: { title: '工具', items: 'spellchecker code' }
                // },
                width: 850, //编辑器宽   max_width   min_width
                // height: 600,//编辑器高  min_height  max_height
                min_height: 450,
                resize: true, //可选值为：true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
                //  content_css : '/mycontent.css' ,content_css该参数可允许你自定义TinyMCE编辑区域内的样式。该参数的值是你的css文件路径，可使用绝对路径或相对路径。
                // statusbar: false,//隐藏状态栏
                // images_upload_url: '/demo/upimg.php',//此参数用于指定一个接受上传文件的后端处理程序地址
                // images_upload_base_path: '/demo',//，可以给相对路径指定它所相对的基本路径。
                images_upload_handler: function (
                    blobInfo,
                    success,
                    failure,
                    progress
                ) {
                    //自定义上传
                    // let formData = new FormData();
                    // formData.append('file', blobInfo.blob(), blobInfo.filename());
                    // xhr.upload.onprogress = function (e) {
                    //     progress(e.loaded / e.total * 100);
                    // }
                    // failure('123123123')
                    // return
                    let count = 0;
                    setInterval(() => {
                        progress(count);
                        count++;
                        if (count > 5) {
                            success(
                                "https://gd2.alicdn.com/imgextra/i1/60/O1CN01tqwwY51CJWRbJa6t8_!!60-0-lubanu.jpg"
                            );
                        }
                    }, 1000);
                },
                // auto_focus: true,//自动获取焦点
                //  base_url: '/my/tinymce/dir',// 如果你的tinymce.js和其它应该放到与它同级的文件夹（比如插件皮肤等）因为某种原因没有放在一起。比如tinymce.js你是用cdn引入的，但皮肤和插件你想放在项目里之类的场景，那么用此参数可以解决你的问题。
                //   cache_suffix: '?v=5.0.0',//该参数可在TinyMCE加载js和css文件时，在URL请求后面自动加上指定的后缀，多用于解决缓存问题。
                // content_security_policy: "default-src 'self'",//仅允许当前域名，不包括子域名
                external_plugins: {
                    //引入站外插件
                    indent2em:
                        "https://lskjtest.oss-cn-shanghai.aliyuncs.com/hd-study/upload/6h/sy/7s/2021826_87959.min",
                },
                powerpaste_word_import: "propmt", // 参数:propmt, merge, clear
                powerpaste_html_import: "propmt", // propmt, merge, clear
                powerpaste_allow_local_images: true, //粘贴图片
                images_file_types: "jpeg,jpg,png,gif,bmp,webp", //粘贴上传格式
                paste_data_images: true, //此选项指定是否应从粘贴的内容中删除data:url图像（内联图像）。
                init_instance_callback: (editor) => {
                    editor.setContent(this.value);
                    editor.on("Change KeyUp SetContent", () => {
                        let content = editor.getContent();
                        this.$emit("input", content);

                        // 解决校验后重新输入错误信息还在的问题
                        this.dispatch("ElFormItem", "el.form.blur", content);
                        console.log(content);
                    });
                },
                setup: (editor) => {
                    //初始化前执行
                    // console.log(this.value);
                    // console.log("ID为: " + editor.id + " 的编辑器即将初始化.");
                    // NodeChange
                    //  KeyUp
                    // let timer = null
                    // clearTimeout(timer);
                    // timer = setTimeout(() => {
                    // let length = editor.getContent({
                    //     format: "text",
                    // }).length;
                    // if (length > 15000) {
                    //     this.$notify({
                    //         title: "警告",
                    //         message: "富文本输入的内容已超出限制!",
                    //         type: "warning",
                    //     });
                    //     window.tinymce
                    //         .get(this.tinymceId)
                    //         .setContent(this.value || "");
                    // } else {
                    //     this.$emit("input", editor.getContent());
                    // }
                    // }, 100);
                    // editor.on('Change KeyUp SetContent', () => {
                    //     // this.$emit('change', editor.getContent())
                    // });
                },
                // readonly: true,//将编辑器设置成只读模式，不可编辑。tinymce.editors['编辑器id'].setMode('design');//开启编辑模式 tinymce.editors['编辑器id'].setMode('readonly');//开启只读模式
                branding: false, //设为false时，隐藏编辑器界面右下角的“Powered by Tiny”（官方汉化为：由Tiny驱动）字样。
                // contextmenu: "bold copy ",//指定上下文菜单出现的项目。所谓上下文菜单，就是在编辑器内容出现的右键关联菜单。在当鼠标在链接上时是编辑链接，当鼠标在表格上时是编辑表格。菜单可根据不同的环境出现不同的内容。
                draggable_modal: true, //为tinymceUI的模态窗口添加拖动模式。默认是关闭的。
                // elementpath: false,//设为false时，可隐藏底栏的元素路径
            });
        },
    },
    destroyed () { },
};
</script>

<style lang="scss" scoped>
.tinymce {
}
</style>